<template>
	<view class="redpacket">
        <view class="redbox"
          style="background-image:url('https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/redpacket.png?sign=9c2774d50e536f573c56a378bd247ebd&t=1609730960')">
          <view class="redtext">手气红包池</view>
          <view class="tack" @click="robred">抢红包</view>
          <view class="redreddian"  >{{count}}</view>
          <view class="canrob">今日可抢{{count}}个</view>
        </view>
        <view class="grade">
          <view class="touch"
            style="background-image:url('https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/redtouch.png?sign=4bb738f79160882410b5abe604c179ba&t=1609740462')">
          </view>
          <view class="classbox">
            <view class="aa">{{luck}}</view>
            <view class="jia">+</view>
          </view>
        </view>
        
        <view class="qianbaobox">
          <view class="qianbao" v-for="(item,index) in qianbaolist" :key="index" @click="showPopup(index+1)"
            :style="{'background-image':`url('${item.icon}')`}"></view>
        </view>
        
        <view class="myredbox" v-if="isShowPopup1">
          <view class="myredicon"
            style="background-image:url('https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/redmyredbag.png?sign=1da536fe58206b09474c60d1a536cf81&t=1609832077')">
          </view>
          <view class="myredmoney">￥{{mymoney}}</view>
          <view class="myredclass">
            <view class="classboxbox">
              <view @click="toggleTab(1)" :class="{classboxone1: myredactive==1,classboxone:  myredactive==2}">获得红包</view>
              <view @click="toggleTab(2)" :class="{classboxone1: myredactive==2, classboxone:  myredactive==1}">转出红包</view>
            </view>
            <view>
              <scroll-view scroll-y="true" style="height:500rpx">
                <view v-if="myredactive == 1">
                  <view class="myredlist" v-for="(item,index) in timelist" :key="index">
                    <view class="myredlisttop">{{item.utime}}</view>
                    <view class="myredlistbottom" v-if="myredactive == 1">获得<text>{{item.price}}</text>元</view>
                  </view>
                  <view v-if="timelist==''||timelist==null" style="line-height:240rpx;color:black;text-align: center;">
                    暂无记录</view>
                </view>
                <view v-if="myredactive == 2">
                  <view class="myredlist" v-for="(item,index) in zclist" :key="index">
                    <view class="myredlisttop">{{item.ctime}}</view>
                    <view class="myredlistbottom">转入钱包<text>{{item.count}}</text>元</view>
                  </view>
                  <view v-if="zclist==''||zclist==null" style="line-height:240rpx;color:black;text-align: center;">暂无记录
                  </view>
                </view>
              </scroll-view>
            </view>
          </view>
          <view class="goback" @click="isShowPopup1=false">
            <view class="backimg"
              style="background-image:url('https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/redback.png?sign=cba127dcca037bf8e36cf0f58301c4f7&t=1609750566')">
            </view>
            <view class="back">返回</view>
          </view>
        </view>
        <!-- 转入钱包 -->
          <view class="zhuanru" v-if="isShowPopup2">
              <view class="goback" @click="isShowPopup2=false">
                <view class="backimg"
                  style="background-image:url('https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/redback.png?sign=cba127dcca037bf8e36cf0f58301c4f7&t=1609750566')">
                </view>
                <view class="back">返回</view>
              </view>
            <view class="zhuanruicon"
              style="background-image:url('https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/redzhuanrubag.png?sign=3aacb8a68a9f25f2f0a66a6ba533d6ac&t=1609835876')">
            </view>
            <view class="zhuanruinput">
              <view class="zhuanruqian">￥</view>
              <input class="zrinput" type="digit" placeholder="请输入转入钱包金额" v-model="outputMoney"
                placeholder-style="color:#FF9E0C;font-size:32rpx" />
            </view>
            <view class="zrmoney">可转入金额 ￥{{mymoney}}</view>
            <view class="zrbutton" @click="zrmo">确认转入</view>
            <view class="zrtishi">
              <view class="txt1">注意事项:</view>
              <view class="txt1">a.红包需满20元可提现到钱包。</view>
              <view class="txt1">b.连续3天没进行提现到钱包的记录，自动增加10个点的手气值</view>
            </view>
          </view>
            <view v-if="isShowPopup3" class="popup3">
                <view class="hongbaoclose"
                  style="background-image:url('https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/ca.png?sign=14ecb9cc2e374ad9d596c1f052fe2557&t=1609814698')"
                  @click="isShowPopup3=false"></view>
                <view class="hongbaokai"
                  style="background-image:url('https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/redredkai.png?sign=688d6ae35c1027d11f3e6a26bf4a04c0&t=1609815849')">
                  <view class="hongbaotext">
                    <view class="textone">— 恭喜你抢中 —</view>
                    <view class="textmoneyone">￥{{price}}</view>
                  </view>
                </view>
            </view>
        <view class="mask" v-show="isShowPopup1 || isShowPopup2 || isShowPopup3"></view>
    </view>
</template>

<script>
	export default {
		data() {
			return {
                timelist: [],
                zclist: [],
                outputMoney: '',
				moneynum: 100,
                getNum: 2,
                touchnum: 320,
                qianbaolist:[{
                  icon:'https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/redmy.png?sign=bfcb6e62d638bc38255d2976e3b837a8&t=1609743363',
                },{
                  icon:'https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/redzhuanru.png?sign=1f7e8e017f3c78ab226e776e5671e224&t=1609743376',
                }],
                mymoney: 6.0,
                myredactive: 1,
                isShowPopup1: false,
                isShowPopup2: false,
                isShowPopup3: false,
                count: "",
                luck: "",
                price: "",
			}
		},
		methods: {
            zrmo(){
              if(this.outputMoney<20){
                uni.showToast({
                  title: '20元起提',
                  icon:'none'
                })
                return
              }
              if(this.outputMoney == 0 || this.outputMoney == ''){
                uni.showToast({
                  title: '请输入金额',
                  icon:'none'
                })
                return
              }
              if(this.outputMoney>this.data.mymoney){
                uni.showToast({
                  title: '余额不足',
                  icon:'none'
                })
                return
              }
              var aa= this
              uni.showModal({
                title: '提示',
                content: `是否确认转入${this.mymoney}元`,
                success: (res)=>{
                  if (res.confirm) {
                      this.$api.postBalance({
                          uid: true,
                          price: this.outputMoney
                      }).then(res=>{
                          uni.showToast({
                            title: '转入成功',
                            icon:'success',
                          })
                          this.outputMoney = ""
                          this.getsqz();
                      })
                  } 
                } 
               })
            },
			toggleTab(index) {
                this.myredactive = index;
            },
            showPopup(type) {
                this['isShowPopup'+type] = true;
            },
            robred() {
                this.$api.getred({uid: true},{loading:true}).then(res=>{
                    this.price = res.data.price;
                    this.isShowPopup3 = true;
                    this.getsqz()
                })
            },
            getsqz() {
                if (uni.getStorageSync("userInfo")) {
                    this.$api.getsqz({uid:true}).then(res=>{
                        this.count = res.data.count;
                        this.luck = res.data.arr.luck;
                        this.mymoney = res.data.arr.redpack
                    })
                }
            },
            init() {
                this.getsqz();
            }
		},
        watch: {
            isShowPopup1() {
                if (this.isShowPopup1) {
                    this.$api.gethdhb({uid: true}).then(res=>{
                        this.timelist = res.data;
                    })
                    this.$api.getzcjl({uid: true}).then(res=>{
                        this.zclist = res.data;
                    })
                }
            }
        },
        created() {
            this.init();
        }
	}
</script>

<style>
    .popup3 {
        position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 20%;
            z-index: 999;
    }
    .mask {
        position: absolute;
        z-index: 9;
        background-color: rgba(0,0,0,.5);
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
    }
    .tack {
        background: linear-gradient(0deg, #FD8505 0%, #FEEE54 86%, #FFFFDB 97%, #FEFD89 100%);
        border-radius: 100px;
        width: 184px;
        text-align: center;
        line-height: 44px;
        height: 44px;
        color: #fff;
        font-weight: 550;
        font-size: 22px;
        position: absolute;
        top: 66vw;
        left: 50%;
        transform: translateX(-50%);
    }
.redpacket {
  width: 100%;
  height: 100vh;
  position: fixed;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/redfireworks.gif);
}
.redpacket1 {
  width: 100%;
  height: calc( 100% -  166rpx);
  position: fixed;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
page {
  height: calc( 100% -  98rpx);
}
.commodityimg{
  width: 118rpx;
  height: 64rpx;
  position: absolute;
  top: 90rpx;
  z-index: 2;
}
.redbrand {
  width: 500rpx;
  height: 200rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 94rpx;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.redbox {
  width: 560rpx;
  height: 640rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  top: calc(50% - 300rpx);
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
}

.redtext {
  font-size: 60rpx;
  color: #FEFFB3;
  font-weight: 550;
  text-shadow: 0px 3px 7px rgba(183, 0, 23, 0.65);
  position: absolute;
  top: 335rpx;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.redtext1 {
  font-size: 54rpx;
  color: #FEFFB3;
  font-weight: 550;
  text-shadow: 0px 3px 7px rgba(183, 0, 23, 0.65);
  position: absolute;
  top: 380rpx;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.redbutton {
  width: 340rpx;
  height: 80rpx;
  text-align: center;
  border-radius: 30rpx;
  background: linear-gradient(0deg, #FD8505 0%, #FEEE54 86%, #FFFFDB 97%, #FEFD89 100%);
  color: white;
  /* text-shadow: #FEEE54 1px 0 0, #FEEE54 0 1px 0, #FEEE54 -1px 0 0, #FEEE54 0 -1px 0; */
  /* -webkit-text-stroke:1px #FEEE54; */
  font-weight: 550;
  font-size: 40rpx;
  line-height: 80rpx;
  position: absolute;
  top: 480rpx;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.redreddian{
  width: 50rpx;
    height: 50rpx;
    border-radius: 50%;
    text-align: center;
    line-height: 50rpx;
    font-size: 24rpx;
    background: red;
    color: white;
    font-weight: 550;
    position: absolute;
    right: 174rpx;
    top: 486rpx;
}
.canrob {
  width: 400rpx;
  height: 60rpx;
  background: #666;
  border-radius: 30rpx;
  line-height: 60rpx;

  color: white;
  text-align: center;
  position: absolute;
  top: calc(50% + 340rpx);
  left: 0;
  right: 0;
  margin: 0 auto;
  letter-spacing: 2rpx;
}

.redlist {
  width: 110rpx;
  height: auto;
  position: absolute;
  right: 0rpx;
  top: 180rpx;
}

.redicon {
  width: 90rpx;
  height: 116rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-bottom: 20rpx;
}

.leftbottom {
  width: 200rpx;
  height: 160rpx;
  position: absolute;
  left: 20rpx;
  top: 120rpx;
}

.headerimg {
  width: 100%;
  height: 140rpx;
}

.headerbox {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background-color: beige;
  margin: 0 auto;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.general {
  width: 160rpx;
  height: 60rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 0 auto;
  transform: translateY(-30rpx);
}

.grade {
  width: 300rpx;
  height: 60rpx;
  position: absolute;
  left: 10rpx;
  top: 15px;
  display: flex;
}
.grade1 {
  width: 300rpx;
  height: 60rpx;
  position: absolute;
  left: 10rpx;
  top: 120rpx;
  display: flex;
}

.touch {
  width: 90rpx;
  height: 80rpx;
  z-index: 2;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.classbox {
  width: 180rpx;
  height: 40rpx;
  font-size: 28rpx;
  line-height: 40rpx;
  border-radius: 30rpx;
  background-color: #666;
  transform: translateX(-30rpx);
  margin-top: 14rpx;
  position: relative;
  color: white;
}

.jia {
  font-size: 24rpx;
  color: white;
  position: absolute;
  right: 6rpx;
  bottom: 4rpx;
}

.redb {
  width: 160rpx;
  height: 170rpx;
  position: absolute;
  bottom: 210rpx;
  right: 14rpx;
}

.redbb {
  width: 160rpx;
  height: 170rpx;
  position: absolute;
  bottom: 30rpx;
  right: 14rpx;
}

.redbbb {
  width: 160rpx;
  height: 180rpx;
  position: absolute;
  bottom: 30rpx;
  right: 200rpx;
}
.dian{
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  background-color: #FDC41D;
  position: absolute;
  top: -10rpx;
  right: 0rpx;
  text-align: center;
  line-height: 40rpx;
  font-size: 22rpx;
  color: #DB0100;
}
.gouwu {
  width: 120rpx;
  height: 120rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 0 auto;
}

.yinliu {
  width: 120rpx;
  height: 130rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 0 auto;
}

.button {
  width: 140rpx;
  height: 40rpx;
  text-align: center;
  line-height: 40rpx;
  margin: 0 auto;
  color: #BB2300;
  font-size: 28rpx;
  border-radius: 20rpx;
  background: linear-gradient(0deg, #FDAC05 0%, #FEEE54 86%, #FFFFDB 97%, #FEFD89 100%);
}
.button1 {
  width: 140rpx;
  height: 40rpx;
  text-align: center;
  line-height: 40rpx;
  margin: 0 auto;
  background-color: #666;
  color: white;
  font-size: 28rpx;
  border-radius: 20rpx;
}

.qianbaobox {
  width: 320rpx;
  height: 120rpx;
  position: absolute;
  bottom: 58px;
  left: 14rpx;
  display: flex;
}

.qianbao {
  width: 130rpx;
  height: 120rpx;
  margin-right: 20rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.taskbox {
  width: 600rpx;
  height: 700rpx;
  position: relative;
  top: calc(50% - 350rpx);
  left: 0;
  right: 0;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.taskheader {
  width: 100%;
  height: 120rpx;
  text-align: center;
  line-height: 120rpx;
  font-size: 36rpx;
  background-color: white;
}

.tasklist {
  width: 88%;
  height: 100rpx;
  border-radius: 14rpx;
  margin: 20rpx auto 0;
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
  background-color: white;
}

.tasktext {
  font-size: 26rpx;
  margin-bottom: 8rpx;
}

.tasktext>text {
  color: #00D2FF;
}

.taskget {
  font-size: 26rpx;
}

.taskbutton {
  width: 140rpx;
  height: 50rpx;
  line-height: 50rpx;
  color: #fff;
  text-align: center;
  border-radius: 25rpx;
  font-size: 30rpx;
  align-self: center;
  /* margin-top: 24rpx; */
  background: linear-gradient(0deg, #FF8A00 0%, #FFC000 50%, #FFFEB0 100%);
}

.goback {
  width: 200rpx;
  height: 70rpx;
  display: flex;
  position: absolute;
  left: -20px;
  top: -100px;
}

.backimg {
  width: 70rpx;
  height: 70rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 2;
}

.back {
  width: 140rpx;
  height: 50rpx;
  font-size: 26rpx;
  border-radius: 20rpx;
  background-color: black;
  color: white;
  text-align: center;
  line-height: 50rpx;
  margin-top: 8rpx;
  transform: translateX(-20rpx);
}

.paihangback {
  width: 84%;
  height: 1080rpx;
  position: absolute;
  top: calc(50% - 540rpx);
  left: 0;
  right: 0;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.phlist {
  width: 90%;
  height: 720rpx;
  background-color: white;
  border-radius: 20rpx;
  margin: 200rpx auto 0;
  padding: 0 20rpx
}

.phtable {
  width: 100%;
  height: 120rpx;
  display: flex;
  border-bottom: 1px solid #FFB200;
}

.ranking {
  width: 80rpx;
  height: 80rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  align-self: center;
}

.rankingtext {
  width: 80rpx;
  height: 80rpx;
  align-self: center;
  line-height: 80rpx;
  text-align: center;
  font-size: 36rpx;
  font-weight: 550;
  color: #FFB200;
}

.phimg {
  width: 80rpx;
  height: 80rpx;
  background-color: #ccc;
  border-radius: 50%;
  align-self: center;
  margin: 0 20rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.phkuang {
  width: 200rpx;
  align-self: center;
  height: 80rpx;
  position: relative;
}

.phname {
  font-size: 26rpx;
}

.phzhanli {
  width: 100%;
  height: 40rpx;
  position: absolute;
  bottom: 0;
  display: flex;
}

.zhanliimg {
  width: 40rpx;
  height: 40rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.zhanli {
  font-size: 26rpx;
  margin-left: 4rpx;
  color: #8B3600;
}

.phhongbao {
  width: 200rpx;
  height: 40rpx;
  display: flex;
  align-self: center;
}

.hongbao {
  width: 40rpx;
  height: 40rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.hongbaomoney {
  font-size: 26rpx;
  margin-left: 4rpx;
  color: #8B3600;
  line-height: 40rpx;
}

.phmy {
  width: 90%;
  height: 120rpx;
  background-color: white;
  border-radius: 20rpx;
  margin: 10rpx auto 0;
  padding: 0 20rpx
}

.guizebox {
  width: 600rpx;
  height: 800rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: calc(50% - 400rpx);
  left: 0;
  right: 0;
  margin: 0 auto;
}

.guize {
  width: 520rpx;
  height: 600rpx;
  background-color: white;
  margin: 174rpx auto 0;
  border-radius: 20rpx;
  padding: 16rpx 20rpx 0;
}

.guizeone {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.guizecircle {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  margin-top: 6rpx;
  background-color: #FE00D8;
}
.guizecircle1 {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  margin-top: 4rpx;
  background-color: #FFA340;
  margin-right: 6rpx;
}

.guizetext {
  width: calc(100% - 50rpx);
  font-size: 28rpx;
}
.guizetext1{
  width: 100%;
}
.hongbaoclose {
  width: 90rpx;
  height: 90rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  right: 50rpx;
  z-index: 2;
  top: calc(50% - 350rpx);
}

.hongbaokai {
  width: 600rpx;
  height: 700rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 0 auto;
  position: relative;
  top: calc(50% - 350rpx);
  left: 0;
  right: 0;
}

.hongbaotext {
  position: absolute;
  width: 400rpx;
  height: 160rpx;
  bottom: 120rpx;
  left: calc(50% - 210rpx);
  right: 0;
  text-align: center;
}

.textone {
  font-size: 32rpx;
  color: white;
}

.textmoneyone {
  font-size: 66rpx;
  font-weight: 550;
  color: wheat;
  margin-top: 30rpx;
  text-shadow: 1px 3px 3px rgba(115, 20, 0, 0.75);
}

.myredbox {
  width: 600rpx;
  height: 900rpx;
  margin: 0 auto;
  position: absolute;
  top: 120px;
  z-index: 99;
  left: 0;
  right: 0;
  border-radius: 10rpx;
  text-align: center;
  background: linear-gradient(0deg, #FFC832, #FFE87D);
}

.myredicon {
  width: 300rpx;
  height: 300rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: 0;
  right: 0rpx;
  top: -150rpx;
  margin: 0 auto;
}

.myredmoney {
  font-size: 80rpx;
  color: #F45819;
  position: absolute;
  top: 150rpx;
  font-weight: 550;
  left: 0;
  right: 0rpx;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.myredclass {
  width: 96%;
  height: 600rpx;
  background: #FFF6D1;
  position: absolute;
  top: 260rpx;
  left: 0;
  right: 0rpx;
  margin: 0 auto;
  border-radius: 14rpx;
}

.classboxbox {
  width: 100%;
  height: 80rpx;
  display: flex;
}
.aa{
  width: calc(100% - 20rpx);
  text-align: center;
}
.classboxone {
  width: 50%;
  height: 80rpx;
  line-height: 80rpx;
  /* border-radius: 14rpx; */
  font-weight: 550;
  font-size: 32rpx;
  color: #AE6600;
  text-align: center;
  background-color: #FFE87D;
}

.classboxone1 {
  width: 50%;
  height: 80rpx;
  line-height: 80rpx;
  border-top-right-radius: 14rpx;
  border-top-left-radius: 14rpx;
  /* border-radius: 14rpx; */
  font-weight: 550;
  font-size: 32rpx;
  color: #AE6600;
  text-align: center;
}

.myredlist {
  width: 82%;
  height: 60rpx;
  padding: 20rpx 0;
  font-size: 26rpx;
  text-align: left;
  color: #AE6600;
  border-bottom: 1px solid #FF9500;
  margin: 0 auto;
}

.myredlistbottom>text {
  color: #EC2B00;
}
.butie{
  width: 650rpx;
  height: 950rpx;
  background: linear-gradient(0deg, #E43156 0%, #F0956C 100%);
  border-radius: 14rpx;
  position: relative;
  top: calc(50% - 474rpx);
  left: 0;
  right: 0;
  margin: 0 auto;
}
.butiezhuyi{
  width: calc(94% - 40rpx);
  height: 90rpx;
  padding: 20rpx;
  margin: 0 auto;
  position: absolute;
  top: 812rpx;
  left: 0;
  right: 0;
  display: flex;
  border-radius: 14rpx;
background: linear-gradient(0deg, #FFA600 0%, #FFD200 100%);
}
.butiezhuyileft{
  width: 80%;
  height: 100%;
  color: black;
  font-size: 24rpx;
  margin-right: 4rpx;
}
.zhuanru {
  width: 650rpx;
  height: 560rpx;
  background: linear-gradient(0deg, #FF5E13, #FFD105);
  border-radius: 14rpx;
  position: absolute;
  top: 200px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 99;
}

.linqu{
  position: absolute;
  text-align: center;
  left: 0;
  right: 0rpx;
  font-weight: 550;
  top: 100rpx;
  font-size: 94rpx;
  background: linear-gradient(0deg, #FFF7E3 0%, #FFE87D 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.butiebutton{
  width: 260rpx;
    height: 60rpx;
    font-size: 32rpx;
    color:white;
    text-align: center;
    line-height: 60rpx;
    border-radius: 40rpx;
  
border: 2px solid #FFFFFF;
background: linear-gradient(0deg, #FFA600 0%, #FFD200 100%);
    position: absolute;
    left: 0;
    right: 0rpx;
    top: 220rpx;
    margin: 0 auto;
}
.butieicon{
  width: 300rpx;
    height: 200rpx;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 0;
    right: 0rpx;
    top: -116rpx;
    margin: 0 auto;
}
.butiet{
  font-size: 30rpx;
    color: white;
    position: absolute;
    text-align: center;
    left: 0;
    right: 0rpx;
    top: 82rpx;
}
.butielistbox{
  width: 94%;
  height: 480rpx;
  padding-top: 20rpx;
  background-color: #D64030;
  border-radius: 14rpx;
  margin: 0 auto;
  position: relative;
  top: 302rpx;
  left: 0;
  right: 0;
}
.butielistone{
  width: calc(96% - 80rpx);
  height: 100rpx;
  background-size:100% 100% ;
  background-repeat: no-repeat;
  position: relative;
  margin: 0 auto 8rpx;
  padding: 20rpx 40rpx;
  display: flex;
  justify-content: space-between;
}
.butielisttime{
  
color: #AE6600;
font-size: 24rpx;
  position: absolute;
  top: 10rpx;
}
.butiemiao{
  color: #AE6600;
font-size: 24rpx;
  position: absolute;
  bottom: 10rpx;
}
.butielistmoney{
  font-size: 46rpx;
  color: #D64030;
  font-weight: 550;
  line-height: 100rpx;
}
.butielistbt{
  width:180rpx;
  height: 60rpx;
  font-size: 32rpx;
  line-height: 60rpx;
  align-self: center;
color: #FCE9CC;
  text-align: center; 
background: #C70000;
border-radius: 40rpx;
}
.butielistbt2{
  width:160rpx;
  height: 60rpx;
  font-size: 28rpx;
  line-height: 60rpx;
  align-self: center;
color: #FCE9CC;
  text-align: center; 
background: #C70000;
border-radius: 40rpx;
}
.butielistbt1{
  width:180rpx;
  height: 60rpx;
  font-size: 32rpx;
  line-height: 60rpx;
  align-self: center;
color: #FCE9CC;
  text-align: center; 
background: #666;
border-radius: 40rpx;
}
.zhuanruicon {
  width: 300rpx;
  height: 300rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: 0;
  right: 0rpx;
  top: -200rpx;
  margin: 0 auto;
}

.zhuanruinput {
  width: calc(85% - 80rpx);
  height: 80rpx;
  border-radius: 14rpx;
  position: absolute;
  padding: 10rpx 40rpx;
  background: #FFF6D1;
  left: 0;
  right: 0rpx;
  top: 120rpx;
  margin: 0 auto;
  display: flex;
}

.zhuanruqian {
  font-size: 60rpx;
  color: #FF9E0C;
  font-size: 550;
}

.zrinput {
  height: 50rpx;
  align-self: center;
  color: #FF9E0C;
  font-size: 40rpx;
}

.zrmoney {
  font-size: 30rpx;
  color: white;
  position: absolute;
  text-align: center;
  left: 0;
  right: 0rpx;
  top: 230rpx;
}

.zrbutton {
  width: 300rpx;
  height: 80rpx;
  font-size: 40rpx;
  color: #BB3000;
  text-align: center;
  line-height: 80rpx;
  border-radius: 40rpx;
  font-weight: 550;
  box-shadow: 0rpx 8rpx 0rpx #8B3600;
  background: linear-gradient(0deg, #FFBA00, #FFE87D);
  position: absolute;
  left: 0;
  right: 0rpx;
  top: 280rpx;
  margin: 0 auto;
}

.zrtishi {
  text-align: left;
  margin-top: 10px;
  position: absolute;
  top: 372rpx;
  width: 93%;
  margin: 0 auto;
  left: 0;
  right: 0;
}
.bttixian{
  width: 580rpx;
  height: 630rpx;
  background: linear-gradient(0deg, #E43156 0%, #F0956C 100%);
  border-radius: 14rpx;
  position: relative;
  top: calc(50% - 315rpx);
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 20rpx;
  text-align: center;
}
.btca{
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  position: absolute;
  top: 24rpx;
  right: 20rpx;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.bttixiantext{
  
font-size: 60rpx;
letter-spacing: 6rpx;
font-weight: 550;
color: #FFFFFF;

-webkit-text-stroke: 2rpx #E91133;

}
.bttixiantext1{
  color: white;
  font-size: 24rpx;
}
.bttixianmoney{
  font-weight: 550;
  font-size: 94rpx;
  background: linear-gradient(0deg, #FFF7E3 0%, #FFE87D 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.btmoneylist{
  width: 560rpx;
  height: 100rpx;
  margin: 0 auto 30rpx;
  display: flex;
}
.btmoneyone{
 background-size: 100% 100%;
 background-repeat: no-repeat;
 width: 186rpx;
 line-height: 100rpx;
 font-weight: 550;
 font-size: 36rpx;
 text-align: center;
color: #C70000;
 height: 100%;
}
.btmoneyone1{
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 186rpx;
  line-height: 100rpx;
  font-weight: 550;
  font-size: 36rpx;
  text-align: center;
 color: #FFE981;
  height: 100%;
 }
.btqueren{
  width: 96%;
  height: 70rpx;
  border-radius: 40rpx;
  line-height: 70rpx;
  text-align: center;
  color: white;
border: 2px solid #FFFFFF;
background: linear-gradient(0deg, #FFA600 0%, #FFD200 100%);
}
.txt{
  width: 100%;
  font-size:24rpx ;
color: #FFE982;
}
.text11{
  width: 100%;
  font-size:28rpx ;
  color: #FFA340;
}
.txt1{
  width: 100%;
  font-size:24rpx ;
color: #FFEB98;

}
.firstbox{
  width: 600rpx;
  height: 596rpx;
  border-radius: 14rpx;
  margin: 0 auto;
  position: relative;
  top: calc(50% - 300rpx);
  left: 0;
  right: 0;
  background: #fff;
}
.firstimg{
  width: 640rpx;
  height: 490rpx;
  transform: translate3d(-26rpx, -46rpx,0rpx);
  background-size: 100%;
  background-repeat: no-repeat;
}
.firstbutton{
  width: 300rpx;
  height: 70rpx;
  line-height: 70rpx;
  color: #F83B3A;
  border:2px solid #F83B3A;
  border-radius: 40rpx;
  margin: 0 auto;
  font-size:32rpx ;
  font-weight: 550;
  text-align:center ;
}
.roboverbox{
  width: 600rpx;
  height: 720rpx;
  border-radius: 14rpx;
  margin: 0 auto;
  position: relative;
  top: calc(50% - 350rpx);
  left: 0;
  right: 0;
  
}
.roboverimg{
  width: 600rpx;
  height: 600rpx;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
}
.roboverimgtext{
  text-align: center;
  font-size: 24rpx;
  color: white;
  position: absolute;
  left: 98rpx;
  top: 470rpx;
}
.roboverbt{
  width: 100%;
  height: 70rpx;
  margin: 44rpx auto 0;
  display: flex;
  justify-content: space-around;
}
.roboverone{
  width: 260rpx;
  height: 66rpx;
  line-height: 66rpx;
  font-size: 30rpx;
  border-radius: 40rpx;
  color: #FF622F;
  border: 2px solid #FF622F;
  text-align: center;
  background: #fff;
}
.robovertwo{
  width: 260rpx;
  height: 70rpx;
  font-size: 30rpx;
  text-align: center;
  line-height: 70rpx;
  border-radius: 40rpx;
background: linear-gradient(0deg, #FF622F 0%, #FFEBB2 100%);
  color: white;
}
.ttbox{
  width: 88%;
  height: 474rpx;
  margin: 30rpx auto 0;
  font-size: 26rpx;
  background: #fff;
  border-radius: 14rpx;
  position: absolute;
  top: 136rpx;
  left: 0;
  right: 0;
  padding: 20rpx;
}
.guizett{
  width: 100%;
  text-align: center;
  margin: 10rpx 0 ;
  font-weight: 550;
  font-size: 32rpx;
  color: #FF5E13;
}
</style>
